<template>
	<view>
		<!--   orderStatus ：3、已发货  5、已完成 
            orderType： 1、图文咨询  2、用药咨询 3、免费咨询  4、现场开方--扫码购药 5、商城订单 6、开具处方

            payStatus: 0、已支付  1、未支付 
    -->
		<view class="uni-padding-wrap uni-common-mt sticky-top">
			<uni-segmented-control :current="current" style-type="text" :values="items" :active-color="activeColor"
				@clickItem="onClickItem" />
		</view>
		<view v-if="listData.length > 0">
			<view v-for="(item, index) in listData" class="allbox" :key="index">
				<view class="box-top">
					<view class="addTime">
						<view>{{ item.addTime }} </view>
					</view>
					<view style="color: #52d0bb" class="addTime">{{
                    orderTypeStatus[item.orderStatus]
                }}</view>
					<!--		<view v-if="payStatus[item.payStatus]=='已支付'" class="addTime gray_font">{{payStatus[item.payStatus]}}</view>-->
				</view>
				<view class="box-bottom">
					<view class="medicalList" v-for="(item2, index) in item.wxOrderDrugResponseBodies" :key="index">
						<view style="display: flex" @click="goCart(item2.drugId)">
							<view class="medical_img">
								<image :src="item2.drugImg"></image>
							</view>
							<view class="medical_name">
								<view>
									<image class="yibaoTips" v-if='(item.medicalItemCode) && item.medicalFlag == 1'
										src="../../static/images/chs.png" />
									<!-- <text
                                        class="yibaoTips"
                                        v-if="item2.medicalItemCode"
                                        >医保</text
                                    > -->
									{{ item2.drugName }}
								</view>
								<view style="
                                        font-weight: normal;
                                        font-size: 29rpx;
                                        margin-top: 10rpx;
                                    " class="gray_font">
									规格：{{
                                    item2.specification
                                        ? item2.specification
                                        : '暂无规格'
                                }}
								</view>
							</view>
						</view>
						<view>
							<view style="text-align: right">x{{ item2.count }}</view>
							<view class="price">￥{{ item2.drugPrice }}</view>
						</view>
					</view>
					<view class="summary">
						<view>共{{ item.total }}件商品</view>
						<view>支付金额
							<text class="price">￥{{ item.price }}</text>
						</view>
					</view>
					<view style="margin-left: 16rpx"
						@click="goto('/pagesSub-My/my/orderDetails?orderId=' +item.orderId)"
						v-if="item.deliveryType != 2 && (item.orderStatus == 3 || item.orderStatus == 5)"
						class="btn_small">物流详情</view>
					<view @click="cancelPay('info', item.orderId)" v-if="current == 0" class="btn_small btn_cancelPay">
						取消订单</view>
					<view @click="toPayPrescribing(item.orderId, item.orderType)" v-if="current == 0" class="btn_small">
						确认支付</view>

					<view v-if="item.payStatus == 0" @click="writeaddress(item.orderId, item.orderType)"
						class="btn_small">
						订单详情
					</view>
					<!--		图文咨询-->
					<!--		<view v-if="item.payStatus ==0&& item.orderType == 2" @click="goto('/pagesSub-My/my/inquiryDetails?consultId='+item.id+'&orderId='+item.orderId)"-->
					<!--		  class="btn_small">-->
					<!--		图文详情-->
					<!--		</view>-->
					<!-- 商城订单 -->
					<!-- <view
                        @click="toPayPrescribing(item.orderId, item.orderType)"
                        v-if="item.payStatus == 1 && item.orderType == 5"
                        class="btn_small"
                        >确认支付</view
                    > -->
					<!-- <view @click="writeaddress(item.orderId,item.orderType)" v-if="item.payStatus ==0&& item.orderType == 5"

class="btn_small">查看详情</view> -->

					<!--扫码购药-->
					<!-- <view
                        @click="toPayPrescribing(item.orderId, item.orderType)"
                        v-else-if="
                            ((item.payStatus == 1 && item.orderType == 4) ||
                            (item.payStatus == 1 && item.orderType == 6) ) && 
                        "
                        class="btn_small"
                    >
                        确认支付</view
                    > -->
				</view>
			</view>

			<uni-load-more :status="statusLoad" :content-text="contentText" v-if="showLoadMore" />
		</view>

		<view class="noInfo_Img" v-else-if="showNoInfo">
			<image src="../../static/images/icon_lack_message@2x.png"></image>
		</view>

		<!-- 取消支付提示窗示例 -->
		<uni-popup ref="alertDialog" type="dialog">
			<view class="inputDialog">
				<view class="title"> 确定要取消吗？ </view>
				<view class="button-bottom">
					<view class="cancel" @click="dialogClose">取消</view>
					<view @click="dialogConfirm" class="green_words">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		drugOrder,
		cancelOrder
	} from '@/api/prescribing.js';

	export default {
		data() {
			return {
				orderId: '', //订单id
				activeColor: '#52D0BB',
				// items: ['待付款', '进行中', '已完成', '已关闭'],
				items: ['待支付', '进行中', '已完成', '已关闭'],
				current: 0,
				//分页开始
				showLoadMore: false,
				showNoInfo: false,
				statusLoad: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中...',
					contentnomore: '没有更多',
				},
				orderTypeStatus: {
					'-1': '申请退款',
					'-2': '退货成功',
					0: '待付款',
					1: '服务中',
					2: '待发货',
					3: '已发货',
					4: '已取消',
					5: '已完成',
					6: '待重新接单',
					7: '待接单',
				},
				total: 0, //总条数
				nowCount: 0, //当前累计显示条数
				//分页结束
				listData: [], //列表数据
				payStatus: {
					0: '已支付',
					1: '待付款',
				},
				// 查询参数
				queryParams: {
					pageNum: 1, //第几页
					pageSize: 10, //每页显示条数
				},
				//状态 1进行中，2已取消，3已完成
				status: 1,
			};
		},
		onLoad: function(option) {
			console.log(option);
			this.showLoadMore = false;

			if (option.status) {
				this.status = option.status;
				this.current = option.status - 1;
				this.getList(this.status);
			} else {
				this.getList(1);
			}
			// console.log(this.current, '999---');
		},
		onShow() {
			this.listData = []
			this.queryParams.pageNum = 1
			if (this.status) {
				this.getList(this.status)
			} else {
				this.getList(1);
			}
		},
		onUnload() {
			uni.switchTab({
				url: '/pages/my/index'
			})
		},
		onReachBottom() {
			if (this.nowCount > 0 && this.nowCount >= this.total) {
				this.statusLoad = 'noMore';
			} else {
				this.showLoadMore = true;
				this.statusLoad = 'loading';
				this.getList();
			}
		},
		methods: {
			// 取消订单弹窗
			dialogClose() {
				this.$refs.alertDialog.close();
				// this.doctorinfo()
			},
			// 取消订单
			cancelPay(type, orderId) {
				this.msgType = type;
				this.orderId = orderId;
				this.$refs.alertDialog.open();
			},
			dialogConfirm() {
				uni.showLoading({
					title: '加载中',
				});
				cancelOrder({
						orderId: this.orderId,
					})
					.then((res) => {
						uni.hideLoading();
						if (res.code == 200) {
							uni.showToast({
								title: '订单已取消',
								duration: 1000,
							});
							this.dialogClose();
							this.queryParams.pageNum = 1;
							this.listData = [];
							setTimeout(() => {
								this.getList();
							}, 1000);
						}
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: '取消失败',
							icon: 'none',
						});
						console.log('取消失败错误#', err);
					});
			},
			goCart(id) {
				uni.navigateTo({
					url: `/pagesSub/homePage/prescribing/mallMessage?medicalid=${id}`,
				});
			},
			goto(url) {
				uni.navigateTo({
					url: url,
				});
			},
			writeaddress(orderId, type) {
				uni.navigateTo({
					url: `/pagesSub/homePage/prescribing/orderDetails?orderId=${orderId}&type=${type}`,
				});
			},

			toPayPrescribing(id, type = 2) {
				uni.navigateTo({
					url: `/pagesSub/homePage/prescribing/mallorder2?item=${id}&type=${type}`,

					// url: `/pagesSub/homePage/prescribing/order?item=${id}&type=${type}`,
				});
			},
			onClickItem(e) {
				let _this = this;
				if (_this.current !== e.currentIndex) {
					_this.current = e.currentIndex;

					_this.nowCount = 0;
					_this.total = 0;
					_this.queryParams.pageNum = 1;
					_this.listData = [];

					if (_this.current == 0) {
						_this.status = 1;
					} else if (_this.current == 1) {
						_this.status = 2;
					} else if (_this.current == 2) {
						_this.status = 3;
					} else if (_this.current == 3) {
						_this.status = 4;
					}
					this.getList();
				}
			},
			getList(val) {
				let _this = this;
				if (val) {
					_this.status = val;
				}
				console.log(this.current + '++++tab块');
				let newData;
				let listData = _this.listData;
				let nowCount = _this.nowCount;
				let pageNum = _this.queryParams.pageNum;
				uni.showLoading({
					title: '加载中',
				});
				 
				drugOrder(_this.status, _this.queryParams)
					.then((res) => {
						let listNew = [];
						newData = listData.concat(res.rows);
						_this.$set(_this, 'listData', newData); //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
						//设置分页
						_this.total = res.total;
						_this.queryParams.pageNum = pageNum + 1;
						_this.nowCount = nowCount + res.rows.length;

						if (pageNum == 1 && res.rows.length <= 0) {
							_this.showNoInfo = true;
						}

						uni.hideLoading();
					})
					.catch((res) => {
						uni.hideLoading();
						this.$util.Tips({
							title: res,
							duration: 3000,
						});
					});
			},
		},
	};
</script>

<style scoped>
	@import '@/static/css/style.css';

	/deep/.segmented-control__text.data-v-064e9cd1 {
		font-size: 31rpx !important;
	}

	/deep/.segmented-control__item--text.data-v-064e9cd1 {
		border-bottom-width: 4rpx;
	}

	.allbox {
		margin: 10rpx 30rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.allbox::after {
		content: '';
		display: block;
		clear: both;
	}

	.box-top {
		display: flex;
		justify-content: space-between;
	}

	.addTime {
		font-size: 30rpx;
	}

	.medicalList {
		font-size: 32rpx;
		padding: 30rpx 10rpx;
		display: flex;
		justify-content: space-between;
	}

	.medical_img {
		width: 180rpx;
		/* height: 130rpx; */
	}

	.medical_img image {
		width: 100%;
		height: 100%;
	}

	.medical_name {
		margin-left: 20rpx;
		width: 90%;
	}

	.price {
		font-size: 30rpx;
		font-weight: bold;
		color: #e26d5f;
		margin-top: 40rpx;
	}

	.summary {
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		padding: 20rpx 0;
	}

	.btn_small {
		font-size: 27rpx;
		color: #ffffff;
		width: 150rpx;
		text-align: center;
		border-radius: 40rpx;
		background: -webkit-linear-gradient(#77e2a4, #4ccdbc);
		height: 55rpx;
		line-height: 55rpx;
		float: right;
		margin-right: 10rpx;
	}

	.btn_cancelPay {
		background: #ffffff;
		color: #4ccdbc;
		border: 1px solid #4ccdbc;
	}

	.sticky-top {
		position: sticky;
		background: #f5f5f5;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1;
	}

	/* 弹出框 start*/
	.inputDialog {
		width: 600rpx;
		border-radius: 10rpx;
		background-color: #ffffff;
	}

	.inputDialog>.title {
		text-align: center;
		padding: 60rpx;
		font-size: 32rpx;
		line-height: 50rpx;
	}

	.button-bottom {
		display: flex;
		border-top: 1px solid #f0f0f0;
	}

	.button-bottom view {
		width: 50%;
		padding: 20rpx 0 20rpx 0;
		font-size: 32rpx;
		text-align: center;
	}

	.cancel {
		border-right: 1px solid #f0f0f0;
	}

	/* 绿色字体 */
	.green_words {
		color: #62c0ad;
	}

	/* 弹出框 end*/
</style>